<template>
	<div>
		<el-row :gutter="15">
			<el-form ref="mealsMenology" :model="mealsMenology" size="medium" label-width="101px" label-position="left">
				<el-col :span="12">
					<el-form-item label="食品名称" prop="foodName">
						<el-input v-model="mealsMenology.foodName" placeholder="请输入食品名称" clearable
							:style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="食品价格" prop="foodPrice">
						<el-input v-model="mealsMenology.foodPrice" placeholder="请输入价格" clearable
							:style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="时间" prop="providedTime">
						<el-select v-model="mealsMenology.providedTime" placeholder="请选择时间" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in providedTimeOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="下拉选择" prop="foodType">
						<el-select v-model="mealsMenology.foodType" placeholder="请选择下拉选择下拉选择" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in foodTypeOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="标签" prop="foodTaily">
						<el-select v-model="mealsMenology.foodTaily" multiple placeholder="请选择标签" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in foodTailyOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>


						<!-- mealsMenology.foodTaily -->
						<!-- <el-select multiple v-model="selectList" placeholder="请选择标签" clearable>
							<el-option v-for="(item,ind) in foodTailyOptions" :key=ind :label="item.label"
								:value="item.value">
							</el-option>
						</el-select> -->



					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="是否清真" prop="status">
						<el-select v-model="mealsMenology.status" placeholder="请选择是否清真" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="星期几上架" prop="supplyWork">
						<el-select v-model="mealsMenology.supplyWork" placeholder="请选择星期几" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in supplyWorkOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="图片" prop="picture">
						<el-select v-model="mealsMenology.picture" placeholder="请选择图片" clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in pictureOptions" :key="index" :label="item.label"
								:value="item.value" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<img :src='"../../img/"+mealsMenology.picture+".jpg"'
					style="height: 300px; width: 300px; margin: 0px auto;" />
			</el-form>
		</el-row>
		<div slot="footer">
			<el-button type="primary" @click="save">确定</el-button>
			<el-button @click="close">取消</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'mealsMenologyEdit',
		props: ['editid'],
		data() {
			return {

				selectList: [],
				mealsMenology: {

					foodTaily: [],
					foodId: '',
					foodName: undefined,
					foodType: undefined,

					foodPrice: undefined,
					picture: 1,
					status: undefined,
					supplyWork: 0,
					providedTime: 1,
				},
				rules: {
					providedTime: [{
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					foodType: [{
						required: true,
						message: '请选择下拉选择下拉选择',
						trigger: 'change'
					}],
					foodTaily: [{
						required: true,
						type: 'array',
						message: '请至少选择一个标签',
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: '请选择是否清真',
						trigger: 'change'
					}],
					picture: [{
						required: true,
						message: '请选择图片',
						trigger: 'change'
					}],
				},
				providedTimeOptions: [{
					"label": "早餐",
					"value": 1
				}, {
					"label": "午餐",
					"value": 2
				}, {
					"label": "晚餐",
					"value": 3
				}],
				foodTypeOptions: [{
					"label": "海鲜",
					"value": "海鲜"
				}, {
					"label": "荤菜",
					"value": "荤菜"
				}, {
					"label": "素菜",
					"value": "素菜"
				}, {
					"label": "大荤",
					"value": "大荤"
				}, {
					"label": "小荤",
					"value": "小荤"
				}, {
					"label": "套餐",
					"value": "套餐"
				}, {
					"label": "豆制品",
					"value": "豆制品"
				}, {
					"label": "饮料",
					"value": "饮料"
				}],
				foodTailyOptions: [{
					"label": "多糖",
					"value": "多糖"
				}, {
					"label": "多盐",
					"value": "多盐"
				}, {
					"label": "少糖",
					"value": "少糖"
				}, {
					"label": "少盐",
					"value": "少盐"
				}],
				statusOptions: [{
					"label": "是",
					"value": "是"
				}, {
					"label": "否",
					"value": "否"
				}],
				pictureOptions: [{
					"label": "虾",
					"value": 1
				}, {
					"label": "肉",
					"value": 2
				}, {
					"label": "素",
					"value": 3
				}, {
					"label": "鱼",
					"value": 4
				}, {
					"label": "套餐",
					"value": 5
				}, {
					"label": "饮料",
					"value": 6
				}],
				supplyWorkOptions: [{
					"label": "周一",
					"value": 0
				}, {
					"label": "周二",
					"value": 1
				}, {
					"label": "周三",
					"value": 2
				}, {
					"label": "周四",
					"value": 3
				}, {
					"label": "周五",
					"value": 4
				}, {
					"label": "周六",
					"value": 5
				}, {
					"label": "周日",
					"value": 6
				}],
				url: '/mealsMenology/save'
			}
		},
		computed: {},
		watch: {},
		created() {
			if (this.editid) {
				// 通过id 读原始数据
				this.axios.get('/mealsMenology/getById', response => {
					this.mealsMenology = response.obj;
					this.mealsMenology.foodTaily=this.mealsMenology.foodTaily.split(",")
				}, {
					id: this.editid
				})
			}
		},
		mounted() {},
		methods: {
			save() {
				this.$refs['mealsMenology'].validate((valid) => {
					if (valid) {
						this.axios.post(this.url, response => {
							// 子组件要改变父组件的值
							this.$emit('update:show', false);
							this.$emit('update:editid', null);
							this.$emit('getData');
						}, this.mealsMenology)
					}
				})
			},
			close() {
				this.$emit('update:show', false);
			}


		},
		// watch: {
		// 	selectList: function(v1, v2) {
		// 		console.log(this.selectList)
		// 		console.log(this.selectList.join(','))
		// 	}

		// }
	}
</script>
<style>
</style>
